<template>
  <div>
    <!-- <h1>论坛</h1> -->
    <van-nav-bar title="全部主题" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <!-- list热门主题 -->
    <div class="title">
      <van-sidebar>
        <van-sidebar-item title="热门主题" />
      </van-sidebar>
    </div>
    <!-- 动态绑定显示更多内容v-for -->
    <div class="list" :value="list" v-for="(item,index) in list" :key="index" @click="show1()">
      <!-- 最近发表,最近回复,精选帖子 -->
      <!-- <div class="item">
        <div class="icon">
          <img src="static/images/QQ.png" class="img" />
        </div>
        <div class="content">
          <div class="type">野钓传统军</div>
          <div class="datail">野钓的魅力在于你永远不知道钓上啥鱼</div>
        </div>
        <div class="num">今日:506</div>
      </div> -->
      <!-- 动态获取数据 -->
      <div class="item">
        <div class="icon">
          <img src="static/images/QQ.png" class="img" />
        </div>
        <div class="content">
          <div class="type">{{item.name}}</div>
          <div class="datail">野钓的魅力在于你永远不知道钓上啥鱼</div>
        </div>
        <div class="num">今日:506</div>
      </div>
    </div>
    <div class="title">
      <van-sidebar>
        <van-sidebar-item title="热门主题" />
      </van-sidebar>
    </div>
    <div class="list">
      <div class="item">
        <div class="icon">
          <img src="static/images/QQ.png" class="img" />
        </div>
        <div class="content">
          <div class="type">野钓传统军</div>
          <div class="datail">野钓的魅力在于你永远不知道钓上啥鱼</div>
        </div>
        <div class="num">今日:506</div>
      </div>
    </div>
  </div>
</template>
<script>
// axios引入,获取数据
import axios from 'axios';
export default {
  data() {
    return {
      list: '',
      show: false
    };
  },
  mounted() {
    axios.get('./static/data/text.json').then(res => {
      console.log(res.data.staffList[0].name);
      this.list = res.data.staffList;
      console.log(this.list);
    });
  },
  methods: {
    //返回
    onClickLeft() {
      this.$router.push({
        name: 'forum'
      });
    },

    //详情的展示
    formatDate(list) {
      return;
    },
    // 论坛发帖
    onCofrim(list) {
      this.show = false;
      this.list = this.formatDate(list);
    },
    // 论坛详细点击事件
    show1(){
      this.$router.push({
        name:'主祥',
      })
    }
  }
};
</script>
<style scoped>
.title {
  padding: 1.2rem;
  font-weight: 600;
}
.list {
  display: flex;
  flex-direction: column;
}
.item {
  display: flex;
  margin: 1rem;
  flex-direction: row;
  justify-content: space-evenly;
}
.type {
  font-size: 1.5rem;
  font-weight: 500;
}
.img {
  width: 3rem;
  height: 3rem;
  vertical-align: middle;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.datail,
.num {
  color: gray;
}
</style>